<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门升级</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        <div>姓名：{{name}}</div>
        <div>班级：{{classRoom}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
/*
    1.new Vue(js对象)

    2.js对象
        1).el属性
        2).data属性:js对象(数据)
        3).methods属性:js对象(函数)

    # 特点;视图引用了data中的数据,data中数据修改,视图也会随之修改
            (动态绑定)
 */
// 脚本
let vm = new Vue({
    el : "#div",
    data : {
        name : "张三",
        classRoom : "黑马159期"
    },
    methods : {
        method01 : function () {
            console.log("method01:" + this.name);
        },
        method02(){
            // console.log("method02");
            this.classRoom = "河马159期"
        }
    }
})
// data中的属性就是Vue对象的属性
// methods中的函数就是Vue对象的函数
// console.log(vm.name);
// vm.method01()
// vm.method02()
function hi() {
    vm.method01()
}
function update() {
    vm.method02()
}
</script>
<script>
    let field = "ls";
    let m = function () {
        
    }
    function m2() {
        
    }
    let jsObj = {
        name:"zs",
        speak:function () {
            console.log("xx")
        },
        show(){
            console.log("yy")
            console.log(this.name);
            // console.log(jsObj.name);
            // jsObj.speak()
            // jsObj.show()

        }
    }
</script>
</html>